<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>操作当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="cartStyle.css" />
		<script>
			function cal() {
				if (window.confirm("确定关闭吗")) {
					window.close();
				}
			}

			function cal2() {
				if (window.confirm("确定加入收藏吗")) {

				}
			}

			function cal3(t) {
				if (window.confirm("确定删除吗")) {
					let f = t.parentNode.parentNode.parentNode;
					let b = t.parentNode.parentNode;

					f.removeChild(b);


				}
			}

			function cal4() {
				let qian = 0;
				if (window.confirm("确定结算吗")) {
					var put = document.querySelectorAll("input[name=price]");
					var amount = document.getElementsByName("amount");
					var amount2 = document.querySelectorAll("input[name=amount]");

					for (let i = 0; i < put.length; i++) {

						qian += parseFloat(put[i].value) * amount[i].value;
					}
					document.querySelector("#sp").innerHTML = "¥" + qian + "RMB";
				}
			}

			function add(t) {

				let a = parseFloat(t.previousSibling.value);

				t.previousSibling.value = a + 1;
				// document.querySelector("#price0").innerHTML = "¥" + (parseFloat(document.querySelector("#priced0").value) *
				// 	document.querySelector("#amount0").value);
				let q = t.parentNode.previousElementSibling.lastElementChild.value;


				t.parentNode.nextElementSibling.innerHTML = "¥" + ((a + 1) * q).toFixed(2);



			}

			function del(t) {
				let a = parseFloat(t.nextSibling.value);
				let q = t.parentNode.previousElementSibling.lastElementChild.value;
				t.parentNode.nextElementSibling.innerHTML = "¥" + ((a - 1) * q).toFixed(2);
				t.nextSibling.value--;


				if (a <= 0) {
					alert("不能在减少了")


					t.nextSibling.value = 0;
					t.parentNode.nextElementSibling.innerHTML = "¥" + 0;
				}
				// document.querySelector("#price0").innerHTML = "¥" + (parseFloat(document.querySelector("#priced0").value) *
				// 	document.querySelector("#amount0").value);

			}
			

			function suoyou() {
				let input = document.querySelectorAll("input[type=checkbox]")
				for (let i = 0; i < input.length; i++) {
					
					if (input[i].checked) {
					input[i].checked=false;
					
					} else {
					input[i].checked=true;
					
					}
				}


			}
		</script>
	</head>
	<body>

		<div class="content">
			<div class="logo">
				<img src="dd_logo.jpg"><span id="sp1" onclick="cal()">关闭</span>
			</div>
			<div class="cartList" id="cartList">
				<ul id="u1">

					<li>商品图片</li>
					<li>商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>总价</li>
					<li>操作</li>
					<li><button type="button" onclick="suoyou()">全选</button></li>
				</ul>
				<ul id="u2">
					<input type="checkbox" name="" />
					<li><img src="dog.jpg"></li>
					<li>我和狗狗活下来了</li>
					<li>¥<input id="priced0" type="text" name="price" value="21.90"></li>
					<li><input type="button" name="minus" value="-" onclick="del(this)"><input type="text" name="amount"
							value="1" id="amount0"><input type="button" name="plus" value="+" onclick="add(this)"></li>
					<li id="price0">¥21.90</li>
					<li>
						<p onclick="cal2()">移入收藏</p>
						<p onclick="cal3(this)">删除</p>
					</li>
				</ul>
				<ul id="u3">
					<input type="checkbox" name="" />
					<li><img src="mai.jpg"></li>
					<li>灰霾来了怎么办</li>
					<li>¥<input id="priced1" type="text" name="price" value="24.00"></li>
					<li><input type="button" name="minus" value="-" onclick="del(this)"><input type="text" name="amount"
							value="1" id="amount1"><input type="button" name="plus" value="+" onclick="add(this)"></li>
					<li id="price1">¥24.00</li>
					<li>
						<p onclick="cal2()">移入收藏</p>
						<p onclick="cal3(this)">删除</p>
					</li>
				</ul>
				<ol>
					<li id="totalPrice">商品总计：<span id="sp"></span></li>
					<li><span onclick="cal4()">结 算</span></li>
				</ol>
			</div>
		</div>
	</body>
</html>
